13 — Go live
介绍
在你旅程的这个时候，你也许想把你构建的东西分享出去。截图或视频是一个好的开始，但你的朋友和家人会更喜欢可交互的版本。是时候让这些 WebGL 作品上线了。
各种方案
多年前，让网站上线并没有那么多方案。如今，情况稍微复杂一些，但我们也同样能使用许多便捷的解决方案。
传统构建
在下一节中，我们将使用一种不需要你订阅 OVH、1and1 或 Gandhi 这类"传统" 托管方案、也不必用 FTP 客户端手动上传文件的解决方案。然而，你们中的一些人可能已经有了这类主机，你只想拿到那些应该上传的文件。
你不能简单地把带着 node_modules/ 文件夹和 Vite 配置的整个项目放到主机上。首先，你需要"构建"你的项目，在 webpack 配置中生成浏览器能解释的 HTML、CSS、JS 和 assets 文件。
要构建你的项目，在终端里运行 npm run build。
这个命令会运行位于 /package.json 文件中 scripts > build 属性里的脚本。
等几秒钟，文件应该就会出现在 /dist/ 文件夹里，这个文件夹会在执行 build 时被创建。然后你可以用你喜欢的 FTP 客户端把这些文件上传到线上。
任何时候你想上传新版本，就再运行一次 npm run build，哪怕 /dist/ 文件夹已经存在。
我们不会介绍这些"传统" 托管方案的设置，因为在下一节我们会使用一个更合适的解决方案。
Vercel
Vercel 是那些"现代" 托管方案之一，并带有持续集成功能（测试、部署及其他类似开发步骤的自动化）。它对开发者非常友好，而且易于设置。
你可以把它用于复杂项目，也可以用于本课程中我们创建的那种非常简单的"单页" 网站。
在继续之前，请注意我和（Bruno Simon）和 Vercel 之间没有任何合作关系。我只是喜欢用它来承载我的小型创意作品。
另外，还有其他值得提及的好替代方案，比如 Netlify 和 GitHub Pages。
还要注意，本课剩余部分与你使用 Vercel 的实际体验可能会有细微差别。它是个相当新的产品，开发者们一直在改进这项服务。
创建账户
首先，去 vercel.com 创建一个账户。
你可以在不同的登录方式之间选择，比如 GitHub 连接、GitLab 连接、Bitbucket 连接或经典 Email 访问。
"连接" 类选项可能是好选择，因为 Vercel 的一大特性是它可以作为版本管理方案实现持续集成。如果你不知道 GitHub、GitLab 和 Bitbucket 是什么，它们是托管你的 Git 仓库的服务。换句话说，那是大多数开发者保存代码的地方。
如果你熟悉它们，完全可以选它。这会简化流程，Vercel 会自动拉取你的仓库，帮你设置好线上版本，并在你向仓库推送新版本时自动更新。你甚至可以指定一个特定的分支。
对于不熟悉 Git 托管方案的你，别担心，我们会让本课对大多数学生都适用，选择 Email 方案。即使你目前正在使用 Git，这个方案也照样能正常工作。点击 Email 链接：
然后输入你的邮箱地址，按步骤创建你的账户：
Vercel 会给你发送一封带链接的确认邮件，以便你登录。你点击那个链接之后，就应该连上了。
给项目添加 Vercel
Vercel 以 NPM 模块 的形式提供，你可以全局安装到电脑上，或者作为项目的依赖安装。我们要把它加到项目里，这样如果我们想在另一台电脑上设置项目，或者想和其他开发者分享，就不必在那台电脑上安装任何东西。
在你的项目终端里运行 npm install vercel。一小会儿后，安装就完成了，但你可能会注意到有一些漏洞提示。终端会指示你运行审计来修复它们。你通常可以忽略这些警告，因为它们很可能是误报。
尽管我们把 Vercel 作为项目依赖而不是全局安装添加了，它仍然不能在终端中直接使用。你的 NPM 脚本可以访问它，但你需要先做下面这个改动。
在 package.json 的 "scripts" 属性里，添加一个名为 "deploy" 的新脚本，并把 "vercel --prod" 作为它的值（别忘了在 "dev" 脚本后面加 ,）：
{
"scripts": {
// ...
"deploy": "vercel --prod"
},
}如果你使用不带 --prod 的 "vercel" 命令，代码会发布到一个预览 URL 上，这样你可以在推到生产环境之前先测试它。虽然这是个有趣的特性，但我们不需要预览版本。
从现在起，如果你想在线上部署你的项目，只需在终端里运行 npm run deploy。
首次部署
你第一次想要部署项目时，Vercel 会向你询问一些信息，以便连接你的账户并设置好项目。
在终端里运行 npm run deploy
如果之前你选择了用邮箱连接，用 上 和 下 箭头选择 Continue with Email 并按 Enter：
然后输入你的邮箱：
Vercel 会像之前那样给你发一封邮件。点击邮件里的链接，终端应该会自动继续到下一步：
这时，你应该会看到一个设置并部署当前文件夹的确认提示。选择 Y 并按 Enter：
你的账户可以关联多个 scope 和 team。如果你刚创建账户，应该只有一个。按 Enter 选择它：
在我们的情况下，我们是在创建新项目，不想把代码关联到已有项目。输入 n 并按 Enter：
Vercel 会尝试猜测项目名称，但你可以改成任何你想要的名字。可以使用小写字母、数字和连字符。按 Enter：
如果你是在项目文件夹的根目录执行该代码，可以保留 ./ 并按 Enter：
Vercel 会借助 vite.config.js 文件自动检测设置，我们不需要改动任何东西。输入 n 并按 Enter。
就这样，你的网站应该开始在 Vercel 上部署了。
等一两分钟，Vercel 应该会提示你线上版本的 URL。
Vercel 应该会自动把那个 URL 复制到你的剪贴板。你可以粘贴到你喜欢的浏览器里测试线上版本。
进一步设置
去 vercel.com 并确认你已经登录。
你应该能访问你的 dashboard 并看到你的项目：
点击你的项目。接下来你应该看到这个界面：
在这里，你可以看到项目的预览、获取最新构建的信息、更改部署偏好、查看潜在的错误等等。
你甚至可以添加自定义域名，但本课我们不会介绍这个。
定价
但是等一下，这一切都免费吗？
既是也不是。如果你只是想把你正在构建的那些炫酷 WebGL 作品分享给世界，且没有商业意图，免费方案（名为 Hobby）应该绰绰有余。你可以创建任意数量的项目，并拥有我们刚刚看到的全部功能。
但如果你有商业意图，或者想使用特定功能，比如 team、预览的密码保护、防火墙等等，你可能需要使用付费方案。
另外，Hobby 方案有带宽和构建时间限制。这意味着如果你的网站获得大量关注，或者你部署次数过多，你就不得不切换到付费方案。
方案和定价可以在这里找到：vercel.com/pricing
分享！
现在没什么借口了。把你的作品分享给世界，别忘了在 Twitter 上使用 #threejsJourney 标签。